<template>
  <!-- 点击用户头像时触发显示页面，“个人资料”菜单项显示内容 -->
  <div id="user-center-myInfo-contrainer">
    <el-row id="user-center-myInfo-contrainer-account-header">
      <el-col :lg="2">
        <span>
          <strong>账号信息</strong>
        </span>
      </el-col>
      <el-col :lg="20">
        <el-divider />
      </el-col>
      <el-col :lg="2">
        <el-button size="small" @click="dialogFormVisible = true"
          >修改信息</el-button
        >
      </el-col>
    </el-row>

    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="userInfo">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="userInfo.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="userInfo.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="email"
          label="邮箱"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            {
              type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <el-input v-model="userInfo.email"></el-input>
        </el-form-item>

        
          
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input
            v-model="userInfo.phone"
            autocomplete="off"
            maxlength="11"
            type="tel"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="userInfo.sex" placeholder="请选择性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUserInfo()">确 定</el-button>
      </div>
    </el-dialog>

    <el-row id="user-center-myInfo-contrainer-account-main" :style="none">
      <el-row>
        <el-col :lg="2">
          <span> 账号 </span>
        </el-col>
        <el-col :lg="20">
          <span>
            {{ userInfo.account }}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="2">
          <span> 姓名 </span>
        </el-col>
        <el-col :lg="20">
          <span>
            {{ userInfo.username }}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="2">
          <span> 昵称 </span>
        </el-col>
        <el-col :lg="20">
          <span>
            {{ userInfo.nickName }}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="2">
          <span> 性别 </span>
        </el-col>
        <el-col :lg="20">
          <span>
            {{ userInfo.sex == 0 ? "男" : "女" }}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="2">
          <span> 邮箱 </span>
        </el-col>
        <el-col :lg="20">
          <span>
            {{ userInfo.email }}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="2">
          <span> 手机 </span>
        </el-col>
        <el-col :lg="20">
          <span>
            {{ userInfo.phone }}
          </span>
        </el-col>
      </el-row>
    </el-row>
    <el-row id="user-center-myInfo-contrainer-education-header">
      <el-col :lg="2">
        <span>
          <strong>学历信息</strong>
        </span>
      </el-col>
      <el-col :lg="20">
        <el-divider />
      </el-col>
      <el-col :lg="2">
        <el-button size="small" @click="dialogEduFormVisible = true"
          >学历认证</el-button
        >
      </el-col>
    </el-row>
    <el-dialog title="学历认证" :visible.sync="dialogEduFormVisible">
      <el-form :model="educationInfo">
        <el-form-item label="学校" :label-width="formLabelWidth">
          <el-input
            v-model="educationInfo.school"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="毕业时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="educationInfo.graduationDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="最高学历" :label-width="formLabelWidth">
          <el-input
            v-model="educationInfo.education"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="毕业证书" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:7038/article/education/upload/"
            :show-file-list="false"
            :data="{ id: userInfo.id }"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :limit="1"
          >
            <img
              v-if="educationInfo.img"
              :src="educationInfo.img"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEduFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setEudInfo(userInfo.id)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-row id="user-center-myInfo-contrainer-education-main">
      <el-row>
        <el-col :lg="2">
          <span> 学校 </span>
        </el-col>
        <el-col :lg="20">
          <span> {{ educationInfo.school }} </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="2">
          <span> 毕业时间 </span>
        </el-col>
        <el-col :lg="20">
          <span>
            {{ educationInfo.graduationDate }}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="2">
          <span> 最高学历 </span>
        </el-col>
        <el-col :lg="20">
          <span> {{ educationInfo.education }} </span>
        </el-col>
      </el-row>
    </el-row>
    <el-row id="user-center-myInfo-contrainer-occupation-header">
      <el-col :lg="2">
        <span>
          <strong>任职信息</strong>
        </span>
      </el-col>
      <el-col :lg="20">
        <el-divider />
      </el-col>
      <el-col :lg="2">
        <el-button size="small" @click="jobCertification()">职位认证</el-button>
      </el-col>
    </el-row>
    <el-row id="user-center-myInfo-contrainer-occupation-main">
      <el-row>
        <el-col :lg="2">
          <span> 公司 </span>
        </el-col>
        <el-col :lg="20">
          <span> {{ company.company }} </span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="2">
          <span> 职业 </span>
        </el-col>
        <el-col :lg="20">
          <span>
            {{ userInfo.work }}
          </span>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import {
  getUserById,
  updateUserById,
  setEduction,
  getEduction,
  getCompany
} from "@/api/article/MyInfo";
export default {
  name: "MyInfo",
  data() {
    return {
      userInfo: {
        work:'',
        username:'',
        email:'',
        nickName:'',
        phone:'',
        sex:0,
        account:''
      },
      company:{
        company:''
      },
      educationInfo: {
        education:'',
        graduationDate:'',
        school:'',
        img:''
      },
      dialogFormVisible: false,
      dialogEduFormVisible: false,
      formLabelWidth: "120px",
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  created() {
    this.getUser();
    this.educationInfo.userId = this.userInfo.id;
    this.getEduInfo(this.educationInfo.userId);
    this.getCompanyInfo(1);
  },
  methods: {
    //获得用户信息
    getUser() {
      getUserById().then((response) => {
        this.userInfo = response.data.data;
      });
    },
    getCompanyInfo(id){
      getCompany(id).then(response=>{
        if(response.data.data!=null){
          this.company=response.data.data
        }
      })
    },
    //修改用户信息
    updateUserInfo() {
      updateUserById(this.userInfo).then((response) => {
        this.dialogFormVisible = false;
        this.userInfo = response.data.data;
        //this.getUser();
      });
    },
    //设置学历信息
    setEudInfo(id) {
      this.educationInfo.userId = this.userInfo.id;
      setEduction(this.educationInfo).then((response) => {
        this.dialogEduFormVisible = false;
        this.getEduInfo();
      });
    },
    //获得学历信息
    getEduInfo(id) {
      getEduction(id).then((response) => {
        if(response.data.data!=null){
          this.educationInfo = response.data.data;
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(response, file, fileList) {
      //上传成功后更新学历信息，显示图片
      this.educationInfo = response.data;
    },
    beforeAvatarUpload() {},
    //职位认证
    jobCertification() {
      this.$router.push({ path: "/jobCertification" ,query: {id: this.userInfo.id}});
    },
  },
};
</script>
<style>
#user-center-myInfo-contrainer-account-main,
#user-center-myInfo-contrainer-education-main,
#user-center-myInfo-contrainer-occupation-main {
  margin-left: 10%;
  font-size: 14px;
}
#user-center-myInfo-contrainer-account-main .el-row .el-col:first-of-type,
#user-center-myInfo-contrainer-education-main .el-row .el-col:first-of-type,
#user-center-myInfo-contrainer-occupation-main .el-row .el-col:first-of-type {
  color: #909399;
}
#user-center-myInfo-contrainer .el-col {
  height: 48px;
  line-height: 48px;
}
#user-center-myInfo-contrainer .el-divider {
  vertical-align: middle;
}
#user-center-myInfo-contrainer-account-header,
#user-center-myInfo-contrainer-education-header,
#user-center-myInfo-contrainer-occupation-header {
  width: 98%;
  margin: auto auto;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>